<template>
  <div class="container">

    <h2 style="font-size: 40px;margin-bottom: 10px">交易记录</h2>
    <h3 style="text-align: left;margin-bottom: 20px">转出</h3>
    <el-table
        :data="tableData"
        border
        :header-cell-style="{textAlign:'center'}"
        :cell-style="columnStyle"
        style="width: 100%;"
        :default-sort="{prop: 'transDate', order: 'descending'}">
      <el-table-column
          prop="transDate"
          label="交易日期"
          sortable
          width="200">
      </el-table-column>
      <el-table-column
          prop="come"
          label="姓名"
          width="150">
      </el-table-column>
      <el-table-column
          prop="comecardid"
          label="卡号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="go"
          label="姓名"
          width="150">
      </el-table-column>
      <el-table-column
          prop="gocardid"
          label="卡号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="money"
          label="交易金额"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注">
      </el-table-column>
    </el-table>
    <h3 style="text-align: left;margin: 20px 0">收入</h3>
    <el-table
        :data="tableDataIncome"
        border
        :header-cell-style="{textAlign:'center'}"
        :cell-style="columnStyle"
        style="width: 100%;"
        :default-sort="{prop: 'transDate', order: 'descending'}">
      <el-table-column
          prop="transDate"
          label="交易日期"
          sortable
          width="200">
      </el-table-column>
      <el-table-column
          prop="come"
          label="姓名"
          width="150">
      </el-table-column>
      <el-table-column
          prop="comecardid"
          label="卡号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="go"
          label="姓名"
          width="150">
      </el-table-column>
      <el-table-column
          prop="gocardid"
          label="卡号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="money"
          label="交易金额"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注">
      </el-table-column>
    </el-table>
    <div id="pieChart" style="width:700px; height: 500px;"></div>
  </div>

</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      user: JSON.parse(window.localStorage.getItem("user")),
      tableData: [],
      tableDataIncome: []
    }
  },
  mounted() {
    this.initDataTransfer();
    this.initDataIncome()
  },
  methods: {
    columnStyle({row, column, rowIndex, columnIndex}) {
      if (columnIndex == 2 || columnIndex == 4) {
        return 'background:	#FFF8DC;'
      }
    },
    initDataTransfer() {
      let id = this.user[0].customerID;
      this.postRequest(`/api/trans/${id}`).then(resp => {
        if (resp) {
          if (resp.code == 1) {
            this.tableData = resp.data;
            console.log(this.tableData)
          }
        }
      })
    },
    initDataIncome() {
      let id = this.user[0].customerID;
      this.getRequest(`/api/trans/income/${id}`).then(resp => {
        if (resp) {
          if (resp.code == 1) {
            console.log(resp.data)
            this.tableDataIncome = resp.data;
            console.log(this.tableDataIncome)
            this.drawPieChart();
          }
        }
      })
    },
    formatter(row, column) {
      return row.address;
    },
    drawPieChart() {
      console.log(this.tableData)
      console.log(this.tableDataIncome)
      const TransMoney = this.tableData.reduce((sum, item) => sum + item.money, 0);
      const IncomeMoney = this.tableDataIncome.reduce((sum, item) => sum + item.money, 0);
      let data = [
        {value: TransMoney, name: "支出"},
        {value: IncomeMoney, name: "收入"},
      ]

      const chartDom = document.getElementById('pieChart');
      const myChart = echarts.init(chartDom);

      const option = {
        title: {
          text: '收支',
          left: 'center'
        },
        legend: {
          data: ["收入", "支出"],
          right: "0%",
          top:"40%",
          orient: "vertical"
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            label: {
              show: true,
              formatter: "{b} : {c} ({d}%)" // b代表名称，c代表对应值，d代表百分比
            },
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    }
  }
}
</script>

<style scoped>
.container {
  text-align: center;
}

#pieChart {
  margin: 20px auto;
}
</style>